<template>
  <div class="about">
    <!--<h1>This is an about page</h1>
    <p>query:{{query}}</p>
    <p>params:{{params}}</p>
  		-->
	

   
  <div class="About_title">
  	<p><img src="../../../img/local.png"/></p>
  	<h1>{{cinemaData.nm}}</h1>
  	<h2>{{cinemaData.addr}}</h2>
  </div> 
   
  <div class="movie-box"> <!--轮播图-->
     
     <div class="About_bg"></div>
     <div class="About_filter"	
     		v-if="showData.length!=0"
     	 :style="{'background-image':`url( ${pic((showData[swiperIndex].img),(148.208))} )`}"
     	></div>   	
        	
            <swiper  ref="centerswiper" :options="swiperOption">
                <!-- slides -->
                <swiper-slide v-for="(m,n) in showData"
                				:class="{scale:n==swiperIndex}"
                	>
                		<img :src="pic((m.img),(65.95))" @click="toyou(n)"/> <!--记得v-bind:-->
                  			
                </swiper-slide>
            </swiper>
   </div>
<!--电影 message-->
			<div class="message"
				v-if="showData.length!=0">
				<h1><span>{{showData[swiperIndex].nm}}</span>&nbsp;<span>{{showData[swiperIndex].sc}}<b>分</b> </span></h1>
				<h2>{{showData[swiperIndex].desc}}</h2>
			</div>

			<!--电影播映 日期 nav-->
			<div class="A_c_nav">
					<ul >
						<!--:class="{choose:d.dateShow}"-->
						<!--showData[swiperIndex].shows-->
						<li v-for="(d,n) in showData[swiperIndex].shows"	
							 class="A_c_nav_li"
							:class="{choose:n==day}"
							@click="chooseDate(n)"
							>
							{{d.dateShow}}
						</li>
						<div class="clear"></div>
					</ul>
					
			</div>
			
			<!--VIP Info 首单立减-->
			<div class="VipInfo" v-if="vipInfo">
				<span class="vip_label">{{vipInfo[0].tag}}</span>
				<span class="vip_title">{{vipInfo[0].title}}</span>
				<span class="vip_process">{{vipInfo[0].process}}</span>
				
			</div>
			
			
			<!--播映场次-->
			<div class="A_showBox" >
						<div class="A_shows"
							v-for="(item,x) in ((showData[swiperIndex]).shows[day].plist)"
							
							>
								<div class="A_shows_l">
								<p>{{item.tm}}</p> 
								<p>开场</p>
								</div>
								
								<div class="A_shows_r2">
										<button v-if="(showData[swiperIndex]).shows[day].plist[x].forbiddenTip" class="A_stop">停售</button>
										<button v-else class="A_buy">购票</button>
										
								</div>
								
								<div class="A_shows_r1">
								<p><i>￥</i><i>{{Number(item.vipPrice) +4 }}</i><span v-if="item.vipPriceName">{{item.vipPriceName}}</span> <span v-if="item.vipPrice">{{item.vipPrice}}</span> </p> 
								<p v-if="item.extraDesc">{{item.extraDesc}}</p>
								</div>
								
								
								
								<div class="A_shows_middle">
								<p>{{item.lang}}{{item.tp}}</p> 
								<p>{{item.th}}</p>
								</div>
								
								
						</div>
						
							<!--若没有场次-->
							<div v-if="((showData[swiperIndex]).shows[day].plist).length==0" class="A_noshow">
								<div class="A_img_box">		<img src="../../../img/noshow.png"/>	</div>
								<p>今日场次已映完</p>
								<div class="A_more_show">点击查看更多场次</div>
							</div>
						
			</div>
						
						<!--零食-->
					<div class="food">
						<p>影院超值套餐</p>
						<ul v-for="(item,index) in food">
							
							<li v-for="(f,x) in item">
								<img :src="pic((f.imageUrl),(92.92))"/>
								
								<span class="f_hot" v-if="f.cardTag=='HOT'">{{f.cardTag}}</span>
								<span class="f_new" v-if="f.cardTag=='新品'">{{f.cardTag}}</span>
								
								<div class="food_menu">
										<h1><span>{{f.titleTag}}</span>{{f.secondTitle}}</h1>
										<div class="sellout">{{f.curNumberDesc}}</div>
										<div class="sellprice">
											<span>￥</span>
											<span>{{f.price}}</span>
										</div>
										<div class="tobuy">去购买</div>
								</div>
							</li>
							
						</ul>
					</div>

	</div>
</template>

<script type="text/javascript">export default {
	created() {
		//			console.log('query',this.$route.query) //获得 其他页面传过来的参数
		//			console.log('parmas',this.$route.params)
		//			this.query=this.$route.query;
		//			this.params=this.$route.params;

		//ajax
		///////////////////////////////////////////////////////////////			
//		this.cinemaName= this.$route.params.name
//		this.$store.commit('changeHT',(this.cinemaName))
		this.id = this.$route.params.id; // 获取从上一个页面传过来的数据
		this.cinema_id = this.$route.params.cinema_id; // ...
		//请求 轮播图 的遍历数据
		this.axios_showData();

		//																不行！
		//										this.$nextTick().then( 
		//											()=>{
		//									  console.log( this.$refs.centerswiper);
		//					 					this.$refs.centerswiper.$on('reachEnd',()=>{
		//										 console.log('ends',this.$refs.centerswiper.swiper.activeIndex)
		//																															 })
		//													this.into++;		// ++ 之后就不会再进入添加 监听的if
		//																							 })
		//				

			
	},
	data() {
		return {
			//				query:{},
			//				params:{},
			///////////////////////////////////////////////////////////////					
			id: '',
			cinema_id: '',cinemaName:'',//电影院名字
			showData:'', //轮播图用到的数据
			swiperIndex: 0,
			movieIndex: 0,
			cinemaData:'',
			food:[],
			vipInfo:'',//有的电影院有有的没(折扣-首单立减)
			into: 0,
			day:0,//选择日期所用
			swiperOption: {
				slidesPerView: 'auto', // 两侧的张数设为auto 
				spaceBetween: 30, // swiper-slide之间的空隙（margin值）
				centeredSlides: true, // 是否居中
			},

		}
	},

	methods: {
		axios_showData() {
			this.axios.get('/ajax/cinemaDetail', {
				params: {
					cinemaId: this.cinema_id,
					movieId: this.id,
				}
			}).then((res) => {
				console.log('nowData', res.data);
				this.vipInfo= res.data.showData.vipInfo
				this.showData = res.data.showData.movies
				this.movieIndex = res.data.movieIndex
				this.cinemaData = res.data.cinemaData
							
				//处理 零食 数据
				var arr = res.data.dealList.divideDealList;
				var temp=[];
				if(arr[0]!=undefined&&arr[1]!=undefined){		// 多人套餐在前，单人套餐在后
					var kong; kong=arr[0]; arr[0]=arr[1]	;arr[1]=kong
				} 
					arr.forEach( function(item){  // 取出套在里面的数据
					temp.push(item.dealList)	})
				 this.food=temp;
//				console.log('food', this.food ); 
				////////////////////////////////////////////				
				//相当于 created 第一次请求数据时添加监听事件
				if(this.into == 0) {
						this.$store.commit('changeHT',(this.cinemaData.nm))//第一次渲染头部标题
					
					this.$nextTick(()=> {
						console.log('nextTick',this.$refs)
//						console.log(this.$refs.centerswiper.swiper);

						//跳转到对应图片
						this.$refs.centerswiper.swiper.slideTo(this.movieIndex, 600, false)
//						debugger;
						this.$refs.centerswiper.$on('transitionEnd', () => {
							console.log('ends', this.$refs.centerswiper.swiper.activeIndex)
							this.swiperIndex = this.$refs.centerswiper.swiper.activeIndex

						})
						
						this.into++; // ++ 之后就不会再进入添加 监听的if
					})
				}
				/////////////////////////////////////////////////
			})

		},
		
		//选择播映日期
		chooseDate(shows_index){
				this.day=shows_index
		},
		

		// 修改图片尺寸
		pic(url,wh){
			
	 	 if(typeof url == 'string'&& url!==null){
			return url.replace('w.h', wh)
			}
		},
		
		///点击 跳到这张图片
		toyou(index){
			console.log( "index",index ); 
			this.$refs.centerswiper.swiper.slideTo(index, 500, false)
		},

	},

}</script>


<style lang="scss" scoped>
	html{
		width: 100%;height: 100%;
		position: relative;
		overflow: hidden;
	}		
	.mint-header{
		width: 100%;
	}
			/*顶部*/
		.About_title{
					p{float: right;width: 71px;height: 22px;margin-top: 10px;
					position: relative;    border-left: 1px solid #d8d8d8;
					img{position: absolute;
					top: 0;left: 26px;
						width: 19px;height: 22px;
					}} 
		text-align: left;
 		width: 100%;height: 74px;
		box-sizing: border-box;
		padding: 15px 0 15px 15px;
		h1{
		font-size: 17px;
    font-weight: 700;
    color: #333;
    text-overflow: ellipsis;	
    white-space: nowrap;
    overflow: hidden;
		}
		h2{
		padding-right: 4px;
		margin-top: 2px;
    font-size: 13px;
    color: #999;
    text-overflow: ellipsis;	
    white-space: nowrap;
    overflow: hidden;
		}
}

.swiper-container {	
	overflow: visible;
}
.scale {
	transform: scale(1.05, 1.1);
	border: 2px solid white !important;
}

.movie-box {
	width: 100%;
	height: 135px;
	padding: 20px 15px 20px 5px;
	box-sizing: border-box;
	background-color: transparent;
	position: relative;
	overflow: hidden;
		.About_bg {
		/*背景灰色调色*/
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #40454d;
		opacity: 0.52;
	}
	.About_filter {
		/*背景模糊*/
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		filter: blur(10px);
		background-repeat: no-repeat;
		background-size: cover;
		width: 100%;
		height: 100%;
		img {
			width: 100%;
			height: 100%;
		}
	}
}

.swiper-slide {
	width: 65px !important;
	height: 95px;
	border: 1px solid salmon;
	img {
		width: 100%;
		height: 100%;
	}
}	
	
	.message{
		border-bottom: 1px solid  #f1f1f1;
		width:100%;
		height: 66.5px;
		box-sizing: border-box;
		padding: 11px 15px;
    text-align: center;
    h1{ 
    height: 24px;
    line-height: 24px;
    font-size: 17px;
    color: #333;
    font-weight: 700;
    text-overflow: ellipsis;	
    white-space: nowrap;
    overflow: hidden;
     span:first-of-type{
     			font-weight: 700;
     	    line-height: 24px;
			    font-size: 17px;
			    color: #333;
			  }
			  span:last-of-type{
     			    color: #ffb400;
    					font-size: 16px;
    					b{
    						font-weight: normal;
    						color: #ffb400;
    						font-size: 10px;
    					}
			  }
    }
    h2{
    margin-top: 2px;
    height: 18.5px;
    line-height: 18.5px;
    font-size: 13px;
    color: #999;
    text-overflow: ellipsis;	
    white-space: nowrap;
    overflow: hidden;
    }
	}
	.A_c_nav{
		margin-top: 6px;
		width: 100%;
		height: 45px;
		ul{
			height: 45px;
			width: 100%;
			overflow-y: hidden;
			overflow-x: scroll;
			white-space: nowrap;
			display: flex;flex: 1;
			.A_c_nav_li{
				
				display: inline-block;
			  line-height: 45px;
		    height: 45px;
		    text-align: center;
		    font-size: 14px;    color: #666;     margin-left: 30px;
			}
			li:first-of-type{margin-left: 15px;}
			li:last-of-type{margin-right: 15px;}
			}
	}
	/*-------日期选中效果----------*/	
	.choose{
		color: #f03d37 !important;
    position: relative;
	}
	.choose::after{
		content: "";
    position: absolute;
    width: 110%;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f03d37;
	}
	
	/*VIPinfo---------------------*/
	.VipInfo{
		background-color: #fff5ea;
		padding: 0 15px;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;    margin-top: -1px;
    .vip_label{
    	float: left;
    	background-color: #ff941a;
    	display: inline-block;
	    border-radius: 2px;
	    font-size: 11px;
	    line-height: 16px;
	    height: 15px;
	    width: 30px;
	    overflow: hidden;
	    text-align: center;
	    color: #fff;
	    margin-top: 13px;
	    margin-right: 10px;
    }
    .vip_title{ 
    	float: left;
    	min-width: 157px;
    	color: #fa9600;
    	font-size: 12px;  
    	line-height: 42px;  
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	    }
    	.vip_process{
    		    float: right;
				    line-height: 42px;
				    color: #999;
				    font-size: 12px;
			}
			.vip_process::after{
				    	display:inline-block;
					    content:"";
					    width: 7px;
					    height: 7px;
					    transform: rotate(135deg);
					    border-left: 1px solid #ccc;
					    border-top: 1px solid #ccc;
				    }
	}

	/*播映信息
	 */
	.A_showBox{
				box-sizing: border-box;
				width: 100%;
	}
	.A_noshow{
		border-top:1px solid transparent ;
		width:100%;height: 230px;
    background-color: #f0f0f0;
    
    .A_img_box{
    	width:77px;display: block;
    	margin: 0 auto;
    	margin-top: 35px;
    	 img{
    	 width: 100%;
    		}
    }
   	.A_more_show{
   	margin: 20px auto 0;
    border-radius: 5px;
    width: 170px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #f03d37;
    border: 1px solid rgba(0,0,0,.15);
    background-color: #fff;
    text-align: center;
   	}
    p{ 
    margin-top: 12px;
    line-height: 1;
    font-size: 16px;
    color: #acacac;
    margin: 0 auto;
    }
	}
	.A_shows{
		border-bottom: 1px solid  #ededed;
		box-sizing: border-box;
		width: 100%;
		height: 78px;
		padding: 17px 15px 17px 12.5px;
		}
	.A_shows_l{
		p:first-of-type{ 
		font-size: 20px;
    color: #333;
    line-height: 1;
    white-space: nowrap;
		}
		p:last-of-type{   
		margin-top: 10px;
    color: #999;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    }
    float: left;width: 60px; 
    height: 44px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		
			}
	.A_shows_r1{
		height: 44px;margin-right: 5px;
		box-sizing: border-box;
		float: right;
		width: 120px;text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		p:first-of-type{
			i:first-of-type{
		  line-height: 1;font-size: 11px;font-style: normal;
      color: #f03d37;
			}
			i:last-of-type{font-style: normal;
		      line-height: 1;
			    color: #f03d37;
			    margin-top: 1px;
			    font-size: 19px;
			}
			span:first-of-type{margin-left: 5px;box-sizing: border-box;
				line-height: 15px;font-size: 12px;padding: 0 2px;
				color: #fff;
    		background-color: #f90;
    		}
    	span:last-of-type{   box-sizing: border-box;
    	 line-height: 15px;font-size: 12px;padding: 0 2px;	
     	 color: #f90;
    	 background-color: #fff;}
		}
		p:last-of-type{
		margin-top: 5px;
    display: block;
    font-size: 11px;
    color: #999;
		}
	}
	.A_shows_r2{
		
		float: right;
		margin-top: 4px;
		width: 45px;height: 44px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		.A_stop{
		width: 100%;
    height: 27px;
    line-height: 28px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    background-color: #ccc!important;
    border: 0!important;
		}
		.A_buy{
		width: 100%;
    height: 27px;
    line-height: 28px;
    font-size: 12px;
    background-color: #f03d37;
    color: #fff;
    border-radius: 4px;
    text-align: center;
		}
		
	}
	.A_shows_middle{
		width:20%;
		height:44px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		p:first-of-type{
		margin-top: 2px;
    line-height: 18px;
    font-size: 13px;
    color: #333;
    white-space: normal;
		}
		p:last-of-type{
		margin-top: 7px;
    font-size: 11px;
    color: #999;
    white-space: normal;
		}
	}
	.food{
		border-top: 10px solid #f0f0f0;
		padding-left: 15px;
		width: 100%;
		box-sizing: border-box;
		text-align: left;
		p{
		line-height: 45px;
    height: 45px;
    font-size: 15px;
    color: #666;
		}
		li{
			border-top: 1px solid #f0f0f0;
			cursor: pointer;
	    position: relative;
	    width: 100%;
	    padding: 13px 0;
	    overflow: hidden;
	    box-sizing: border-box;
	    img{
	    	    display: inline-block;
				    width: 92px;
				    height: 92px;
				    float: left;
	    }
	    .f_hot{
	    	    position: absolute;
				    left: 0;
				    top: 13px;
				    display: inline-block;
				    height: 18px;
				    line-height: 18px;
				    background-color: #fa5939;
				    font-size: 12px;
				    padding: 0 5px;
				    color: #fff;
				    border-bottom-right-radius: 2px;
	    }
	    .f_new{
	    	    position: absolute;
				    left: 0;
				    top: 13px;
				    display: inline-block;
				    height: 18px;
				    line-height: 18px;
				    font-size: 12px;
				    padding: 0 5px;
				    color: #fff;
				    border-bottom-right-radius: 2px;
				    background-color: #0ac1ae;
	    }
	    .food_menu{
	    	    position: relative;
				    margin: 0 15px 0 102px;
				    height: 92px;
				.sellout{ 
					    display: inline-block;
					    position: absolute;
					    bottom: 34px;
					    right: 0;
					    line-height: 16px;
					    height: 16px;
					    font-size: 12px;
					    color: #999;
				}
				.sellprice{
							  position: absolute;
						    bottom: 0;
						    left: 0;color: #f03d37;
					    span:first-of-type{
    						    color: #f03d37;
    						    font-size: 14px;
    					}
    					span:last-of-type{
    						    color: #f03d37;
    						    font-size: 17px;
    					}
				}
				.tobuy{
					position: absolute;
			    right: 0;
			    bottom: 0;
			    display: inline-block;
			    padding: 0 8px;
			    height: 27px;
			    line-height: 27px;
			    font-size: 12px;
			    border-radius: 3px;
			    color: #fff;
			    background-color: #f03d37;
			   }
	    	h1{
	    		span{
	    			display: inline-block;
				    vertical-align: top;
				    margin-top: 1px;
				    margin-right: 7px;
				    padding: 0 4px;
				    font-size: 10px;
				    line-height: 15px;
				    height: 15px;
				    background: #f90;
				    border-radius: 2px;
				    color: #fff;
	    		}
	    		font-size: 14px;
			    line-height: 18px;
			    color: #333;
			    display: -webkit-box;
	    	  text-overflow:ellipsis;	
			 		overflow: hidden;
			 		display:-webkit-box;
			 		-webkit-line-clamp: 2;
			 		-webkit-box-orient: vertical;
	    	}
	    	
	    }
		}
	}

</style>